import { grey, primary } from 'palette';
import { SyntheticEvent, useState } from 'react';
import { useRecoilState } from 'recoil';

import { Close as CloseIcon } from '@mui/icons-material';
import {
  Backdrop,
  Box,
  Card,
  CardContent,
  CardMedia,
  IconButton,
  Tab,
  Tabs,
  Typography
} from '@mui/material';
import { styled } from '@mui/material/styles';

import { appListState } from 'state/appList';

interface IStyledTabsProps {
  value: string;
  onChange: (event: React.SyntheticEvent, newValue: string) => void;
  children?: React.ReactNode;
}

interface IStyledTabProps {
  label: string;
  value: string;
}

const StyledTabs = styled((props: IStyledTabsProps) => (
  <Tabs {...props} TabIndicatorProps={{ children: '' }} />
))({
  '& .MuiTabs-indicator': {
    display: 'flex',
    justifyContent: 'center',
    backgroundColor: 'transparent'
  }
});

const StyledTab = styled((props: IStyledTabProps) => <Tab {...props} />)({
  color: grey[900],
  padding: '0px 16px',
  minWidth: '80px',
  minHeight: 'auto',
  '&.Mui-selected': {
    backgroundColor: 'rgba(0, 71, 187, 0.1)',
    color: primary[500]
  }
});

export default function AppListPopup() {
  const [appList, setAppList] = useRecoilState(appListState);
  const tabs = ['全部', '应用', '知识库', '代理'];
  const [activeTab, setActiveTab] = useState(tabs[0]);

  let apps = [
    {
      label: '南京报恩寺数字人',
      image:
        'http://fastdata-cms-prd.s3.cn-northwest-1.amazonaws.com.cn/_e241aae6ac.jpg',
      href: 'http://116.63.137.205:37698/'
    },
    {
      label: 'Spark agent',
      image:
        'http://fastdata-cms-prd.s3.cn-northwest-1.amazonaws.com.cn/spark_bot_2381bd9661.jpeg',
      href: 'http://116.63.137.205:37572/'
    },
    {
      label: '双碳博士',
      image:
        'http://fastdata-cms-prd.s3.cn-northwest-1.amazonaws.com.cn/_a43b8e3ead.jpeg',
      href: 'http://116.63.137.205:37743/'
    },
    {
      label: 'Prompt生成器',
      image:
        'http://fastdata-cms-prd.s3.cn-northwest-1.amazonaws.com.cn/prompt_f43aeda6a9.jpg',
      href: 'http://116.63.137.205:37572/'
    }
  ];

  apps = activeTab === tabs[0] ? apps : [apps[tabs.indexOf(activeTab)]];

  function handleClose() {
    setAppList((old) => ({ ...old, open: false }));
  }

  function handleChange(_: SyntheticEvent, tab: string) {
    setActiveTab(tab);
  }

  return (
    <Backdrop
      sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
      open={appList.open}
    >
      <Box
        sx={{
          width: '100%',
          height: '100%',
          backgroundColor: '#fff'
        }}
      >
        {/* 关闭按钮 */}
        <Box sx={{ textAlign: 'right', padding: '20px' }}>
          <IconButton aria-label="close" size="large" onClick={handleClose}>
            <CloseIcon color="action" />
          </IconButton>
        </Box>

        {/* Tabs 标签页 */}
        <Box
          sx={{
            padding: '0px 30px',
            marginBottom: '12px',
            borderBottom: 1,
            borderColor: 'divider'
          }}
        >
          <StyledTabs value={activeTab} onChange={handleChange}>
            {tabs.map((tab) => (
              <StyledTab
                label={tab}
                value={tab}
                key={tab}
                sx={{ width: '60px', height: '32px' }}
              />
            ))}
          </StyledTabs>
        </Box>

        {/* 应用列表 */}
        <Box
          sx={{
            display: 'flex',
            flexDirection: 'row',
            flexWrap: 'wrap',
            padding: '0 18px'
          }}
        >
          {apps.map(({ label, image, href }) => (
            <Card
              key={label}
              sx={{
                width: 384,
                flexShrink: 0,
                margin: '12px',
                boxShadow: 'none',
                border: '1px solid #F0F3FA',
                ':hover': {
                  boxShadow:
                    '-6px -6px 11px 0px #FFFFFF, 2px 4px 10px 0px rgba(0,67,199,0.2), inset 1px 1px 0px 0px rgba(255,255,255,0.45)'
                }
              }}
            >
              <a
                href={href}
                target="_blank"
                style={{
                  display: 'block',
                  padding: '20px 20px 0 20px',
                  color: '#272F3B',
                  textDecoration: 'none',
                  cursor: 'pointer'
                }}
              >
                <CardMedia
                  component="img"
                  width="345"
                  height="200"
                  image={image}
                  alt="green iguana"
                />
                <CardContent sx={{ textAlign: 'center' }}>
                  <Typography gutterBottom component="div">
                    {label}
                  </Typography>
                </CardContent>
              </a>
            </Card>
          ))}
        </Box>
      </Box>
    </Backdrop>
  );
}
